<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的收藏</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200">
    <script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.js"></script>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Poppins', 'Microsoft YaHei', sans-serif;
        }

        body {
            background-color: #f8f9fa;
            color: #333;
            padding: 20px;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }

        /* 顶部导航 */
        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30px;
            padding-bottom: 20px;
            border-bottom: 1px solid #eaeaea;
        }

        .header h1 {
            font-size: 28px;
            font-weight: 600;
            color: #1a1a1a;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .back-btn {
            display: flex;
            align-items: center;
            gap: 8px;
            color: #666;
            text-decoration: none;
            font-weight: 500;
            padding: 8px 16px;
            border-radius: 8px;
            transition: all 0.3s;
        }

        .back-btn:hover {
            background-color: #f0f0f0;
            color: #333;
        }

        /* 收藏管理栏 */
        .management-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30px;
            background: white;
            padding: 15px 20px;
            border-radius: 12px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
        }

        .collection-info {
            font-size: 16px;
            color: #666;
        }

        .collection-info strong {
            color: #e53935;
        }

        .action-buttons {
            display: flex;
            gap: 15px;
        }

        .action-btn {
            padding: 10px 20px;
            border-radius: 8px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            gap: 8px;
            background: white;
            border: 1px solid #e0e0e0;
        }

        .action-btn.primary {
            background: #1a73e8;
            color: white;
            border: none;
        }

        .action-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        /* 收藏商品网格 */
        .products-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 25px;
            margin-bottom: 40px;
        }

        /* 商品卡片样式 - 基于提供的样式优化 */
        .item {
            background-color: white;
            border-radius: 16px;
            overflow: hidden;
            transition: all 0.3s ease;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
            display: flex;
            flex-direction: column;
            height: 100%;
            position: relative;
        }

        .item:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
        }

        .img-wrapper {
            aspect-ratio: 8/9;
            overflow: hidden;
            position: relative;
        }

        .img-wrapper img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }

        .item:hover .img-wrapper img {
            transform: scale(1.05);
        }

        .favorite-badge {
            position: absolute;
            top: 15px;
            right: 15px;
            width: 36px;
            height: 36px;
            background: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            z-index: 10;
            transition: all 0.3s;
        }

        .favorite-badge:hover {
            background: #ffebee;
        }

        .favorite-badge.active {
            color: #e53935;
        }

        .detail {
            padding: 20px;
            flex-grow: 1;
            display: flex;
            flex-direction: column;
        }

        .price {
            font-size: 18px;
            font-weight: 700;
            color: #e53935;
            margin-bottom: 10px;
        }

        .goodName {
            font-size: 16px;
            font-weight: 600;
            color: #333;
            text-decoration: none;
            margin-bottom: 15px;
            flex-grow: 1;
        }

        .goodName:hover {
            color: #1a73e8;
        }

        .title-inner {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            text-overflow: ellipsis;
            line-height: 1.4;
        }

        .buy-btn {
            padding: 0 20px 20px;
        }

        .buy-btn button {
            width: 100%;
            background: #f8f9fa;
            border: 1px solid #e0e0e0;
            color: #333;
            font-weight: 600;
            padding: 12px;
            border-radius: 30px;
            cursor: pointer;
            transition: all 0.3s;
        }

        .buy-btn button:hover {
            background: #1a73e8;
            color: white;
            border-color: #1a73e8;
        }

        /* 分页控件 */
        .pagination-container {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 40px;
            gap: 20px;
        }

        .pagination-btn {
            padding: 8px 16px;
            background: white;
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .pagination-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        .pagination-btn:hover:not(:disabled) {
            background: #f0f0f0;
        }

        .page-numbers {
            display: flex;
            gap: 8px;
        }

        .page-number {
            width: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 8px;
            cursor: pointer;
            font-weight: 500;
            transition: all 0.3s;
        }

        .page-number:hover, .page-number.active {
            background: #1a73e8;
            color: white;
        }

        .page-size-selector {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-left: auto;
        }

        .page-size-selector select {
            padding: 8px 12px;
            border-radius: 8px;
            border: 1px solid #e0e0e0;
            background: white;
        }

        /* 空状态 */
        .empty-state {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 60px 20px;
            background: white;
            border-radius: 16px;
            text-align: center;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        }

        .empty-state-icon {
            font-size: 64px;
            color: #e0e0e0;
            margin-bottom: 20px;
        }

        .empty-state h3 {
            font-size: 22px;
            margin-bottom: 15px;
            color: #666;
        }

        .empty-state p {
            color: #999;
            margin-bottom: 25px;
            max-width: 500px;
        }

        .browse-btn {
            padding: 12px 30px;
            background: #1a73e8;
            color: white;
            border: none;
            border-radius: 8px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s;
        }

        .browse-btn:hover {
            background: #0d62c9;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(26, 115, 232, 0.3);
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .products-grid {
                grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
                gap: 20px;
            }

            .management-bar {
                flex-direction: column;
                gap: 15px;
                align-items: flex-start;
            }

            .action-buttons {
                width: 100%;
                justify-content: space-between;
            }
        }

        @media (max-width: 480px) {
            .products-grid {
                grid-template-columns: 1fr;
            }

            .pagination-container {
                flex-wrap: wrap;
            }

            .page-size-selector {
                margin-left: 0;
                width: 100%;
                justify-content: center;
                margin-top: 15px;
            }
        }
    </style>
</head>
<body>
<div id="app">
    <div class="container">
        <!-- 顶部导航 -->
        <div class="header">
            <h1>
                <span class="material-symbols-outlined">favorite</span>
                我的收藏
            </h1>
            <a href="#" class="back-btn">
                <span class="material-symbols-outlined">arrow_back</span>
                返回商城
            </a>
        </div>

        <!-- 收藏管理栏 -->
        <div class="management-bar">
            <div class="collection-info">
                共收藏 <strong>{{ totalItems }}</strong> 件商品
            </div>
            <div class="action-buttons">
                <div class="action-btn" @click="clearAllFavorites">
                    <span class="material-symbols-outlined">delete</span>
                    清空收藏
                </div>
                <div class="action-btn primary" @click="goShopping">
                    <span class="material-symbols-outlined">shopping_bag</span>
                    继续购物
                </div>
            </div>
        </div>

        <!-- 收藏商品展示区 -->
        <div v-if="favorites.length > 0">
            <div class="products-grid">
                <div class="item" v-for="(item, index) in displayedFavorites" :key="item.id">
                    <div class="img-wrapper">
                        <img :src="item.main_picture" :alt="item.name">
                        <div class="favorite-badge active" @click="removeFavorite(index)">
                            <span class="material-symbols-outlined">favorite</span>
                        </div>
                    </div>

                    <div class="detail">
                        <div class="price">
                            ${{ formatPrice(item.shop_min_price) }} - ${{ formatPrice(item.shop_max_price) }}
                        </div>
                        <a href="javascript:;" class="goodName">
                            <div class="title-inner">
                                <span>{{ item.name }}</span>
                            </div>
                        </a>
                    </div>

                    <div class="buy-btn">
                        <button @click="viewProduct(item)">
                            <span class="material-symbols-outlined">shopping_cart</span>
                            立即购买
                        </button>
                    </div>
                </div>
            </div>

            <!-- 分页控件 -->
            <div class="pagination-container">
                <button class="pagination-btn" @click="prevPage" :disabled="currentPage === 1">
                    <span class="material-symbols-outlined">chevron_left</span>
                    上一页
                </button>

                <div class="page-numbers">
                    <div
                            v-for="page in totalPages"
                            :key="page"
                            class="page-number"
                            :class="{ active: page === currentPage }"
                            @click="goToPage(page)"
                    >
                        {{ page }}
                    </div>
                </div>

                <button class="pagination-btn" @click="nextPage" :disabled="currentPage === totalPages">
                    下一页
                    <span class="material-symbols-outlined">chevron_right</span>
                </button>

                <div class="page-size-selector">
                    <span>每页显示:</span>
                    <select v-model="pageSize" @change="resetPagination">
                        <option value="8">8</option>
                        <option value="12">12</option>
                        <option value="16">16</option>
                    </select>
                </div>
            </div>
        </div>

        <!-- 空状态 -->
        <div class="empty-state" v-else>
            <div class="empty-state-icon">
                <span class="material-symbols-outlined">favorite</span>
            </div>
            <h3>您的收藏夹是空的</h3>
            <p>您还没有收藏任何商品，快去商城发现您喜欢的商品并添加到收藏夹吧！</p>
            <button class="browse-btn" @click="goShopping">
                去商城逛逛
            </button>
        </div>
    </div>
</div>

<script>
    const { createApp, ref, computed } = Vue;

    createApp({
        setup() {
            // 模拟收藏数据
            const favorites = ref([
                {
                    id: 1,
                    name: "时尚简约女士手表",
                    main_picture: "https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=500",
                    shop_min_price: 12999,
                    shop_max_price: 18999,
                    score: "4.8"
                },
                {
                    id: 2,
                    name: "无线蓝牙降噪耳机",
                    main_picture: "https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=500",
                    shop_min_price: 8999,
                    shop_max_price: 12999,
                    score: "4.7"
                },
                {
                    id: 3,
                    name: "全自动智能咖啡机",
                    main_picture: "https://images.unsplash.com/photo-1556911220-ef412aea014c?w=500",
                    shop_min_price: 24999,
                    shop_max_price: 32999,
                    score: "4.9"
                },
                {
                    id: 4,
                    name: "便携式笔记本电脑",
                    main_picture: "https://images.unsplash.com/photo-1496181133206-80ce9b88a853?w=500",
                    shop_min_price: 78900,
                    shop_max_price: 99900,
                    score: "4.6"
                },
                {
                    id: 5,
                    name: "防水运动相机",
                    main_picture: "https://images.unsplash.com/photo-1502920917128-1aa500764cbd?w=500",
                    shop_min_price: 23900,
                    shop_max_price: 28900,
                    score: "4.5"
                },
                {
                    id: 6,
                    name: "北欧风格台灯",
                    main_picture: "https://images.unsplash.com/photo-1513506003901-1e6a229e2d15?w=500",
                    shop_min_price: 4500,
                    shop_max_price: 6900,
                    score: "4.8"
                },
                {
                    id: 7,
                    name: "真皮女士手提包",
                    main_picture: "https://images.unsplash.com/photo-1584917865442-de89df76afd3?w=500",
                    shop_min_price: 18900,
                    shop_max_price: 24900,
                    score: "4.7"
                },
                {
                    id: 8,
                    name: "男士休闲运动鞋",
                    main_picture: "https://images.unsplash.com/photo-1542291026-7eec264c27ff?w=500",
                    shop_min_price: 12900,
                    shop_max_price: 17900,
                    score: "4.9"
                },
                {
                    id: 9,
                    name: "智能手表运动版",
                    main_picture: "https://images.unsplash.com/photo-1524805444758-089113d48a6d?w=500",
                    shop_min_price: 19900,
                    shop_max_price: 24900,
                    score: "4.6"
                },
                {
                    id: 10,
                    name: "便携式蓝牙音箱",
                    main_picture: "https://images.unsplash.com/photo-1546435770-a3e426bf472b?w=500",
                    shop_min_price: 7990,
                    shop_max_price: 11900,
                    score: "4.5"
                },
                {
                    id: 11,
                    name: "有机棉质床上四件套",
                    main_picture: "https://images.unsplash.com/photo-1441984904996-e0b6ba687e04?w=500",
                    shop_min_price: 8900,
                    shop_max_price: 12900,
                    score: "4.8"
                },
                {
                    id: 12,
                    name: "不锈钢保温杯",
                    main_picture: "https://images.unsplash.com/photo-1602143407151-7111542de6e8?w=500",
                    shop_min_price: 2900,
                    shop_max_price: 4900,
                    score: "4.7"
                }
            ]);

            // 分页相关变量
            const currentPage = ref(1);
            const pageSize = ref(8);

            // 计算属性
            const totalItems = computed(() => favorites.value.length);
            const totalPages = computed(() => Math.ceil(totalItems.value / pageSize.value));

            const displayedFavorites = computed(() => {
                const start = (currentPage.value - 1) * pageSize.value;
                const end = start + pageSize.value;
                return favorites.value.slice(start, end);
            });

            // 方法
            const formatPrice = (price) => {
                return (price / 100).toFixed(2);
            };

            const removeFavorite = (index) => {
                // 计算全局索引
                const globalIndex = (currentPage.value - 1) * pageSize.value + index;
                favorites.value.splice(globalIndex, 1);

                // 如果删除后当前页没有数据，返回上一页
                if (displayedFavorites.value.length === 0 && currentPage.value > 1) {
                    currentPage.value--;
                }
            };

            const clearAllFavorites = () => {
                if (confirm("确定要清空所有收藏吗？")) {
                    favorites.value = [];
                }
            };

            const prevPage = () => {
                if (currentPage.value > 1) {
                    currentPage.value--;
                }
            };

            const nextPage = () => {
                if (currentPage.value < totalPages.value) {
                    currentPage.value++;
                }
            };

            const goToPage = (page) => {
                currentPage.value = page;
            };

            const resetPagination = () => {
                currentPage.value = 1;
            };

            const viewProduct = (item) => {
                alert(`查看商品: ${item.name}`);
                // 实际项目中跳转到商品详情页
            };

            const goShopping = () => {
                alert("跳转到商城页面");
                // 实际项目中跳转到商城首页
            };

            return {
                favorites,
                currentPage,
                pageSize,
                totalItems,
                totalPages,
                displayedFavorites,
                formatPrice,
                removeFavorite,
                clearAllFavorites,
                prevPage,
                nextPage,
                goToPage,
                resetPagination,
                viewProduct,
                goShopping
            };
        }
    }).mount('#app');
</script>
</body>
</html>